<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./../lib/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="./css/kitui.css">
</head>

<body class="kit-layout-admin">
  <div class="kit-topbar">
    <div class="kit-topbar-left">
      <a href="javascript:;">LOGO</a>
    </div>
    <div class="kit-topbar-right">
      <ul class="kit-menu-left">
        <li class="kit-menu-item kit-effect">
          <a href="javascript:;">
            <i class="fa fa-indent" aria-hidden="true"></i>
          </a>
        </li>
      </ul>
      <ul class="kit-menu-right">
        <li class="kit-menu-item">
          <a href="javascript:;">
            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
          </a>
        </li>
        <li class="kit-menu-item" data-toggle="kit-slider">
          <a href="javascript:;">
            <i class="fa fa-sliders" aria-hidden="true"></i>
          </a>
        </li>
        <li class="kit-menu-item" data-toggle="kit-dropdown">
          <a href="javascript:;">
            <i class="fa fa-envelope-o" aria-hidden="true"></i>
          </a>
          <em class="kit-sign"></em>
          <ul class="kit-dropdown kit-dropdown-right kit-notification">
            <li class="kit-item">
              <a href="javascript:;">消息通知</a>
            </li>
            <li class="kit-item">
              <a href="javascript:;">
                <div class="kit-notify-icon kit-bg-success">
                  <i class="fa fa-info-circle" aria-hidden="true"></i>
                </div>
                <p class="kit-notify-detail">
                  你有一条新的留言.
                  <small>5 分钟之前</small>
                </p>
              </a>
            </li>
            <li class="kit-item">
              <a href="javascript:;">
                <div class="kit-notify-icon kit-bg-info">
                  <i class="fa fa-user-circle" aria-hidden="true"></i>
                </div>
                <p class="kit-notify-detail">
                  有一个新的用户注册.
                  <small>6 分钟之前</small>
                </p>
              </a>
            </li>
            <li class="kit-item">
              <a href="javascript:;">
                <div class="kit-notify-icon kit-bg-danger">
                  <i class="fa fa-recycle" aria-hidden="true"></i>
                </div>
                <p class="kit-notify-detail">
                  有一个用户取消关注了..
                  <small>9 分钟之前</small>
                </p>
              </a>
            </li>
            <li class="kit-divider">&nbsp;</li>
            <li class="kit-item">
              <a href="javascript:;">view全部</a>
            </li>
          </ul>
        </li>
        <li class="kit-menu-item" data-toggle="kit-dropdown">
          <a href="javascript:;">
            <img class="kit-user" src="http://m.zhengjinfan.cn/images/0.jpg" />
          </a>
          <ul class="kit-dropdown kit-dropdown-right">
            <li class="kit-item">
              <a href="javascript:;">
                <i class="fa fa-user-secret" aria-hidden="true"></i> 个人信息
              </a>
            </li>
            <li class="kit-item">
              <a href="javascript:;">
                <i class="fa fa-cogs" aria-hidden="true"></i> 设置
              </a>
            </li>
            <li class="kit-item">
              <a href="javascript:;">
                <i class="fa fa-unlock-alt" style="margin-right: 8px;margin-left: 3px;" aria-hidden="true"></i>锁屏
              </a>
            </li>
            <li class="kit-divider">&nbsp;</li>
            <li class="kit-item">
              <a href="javascript:;">
                <i class="fa fa-sign-out" aria-hidden="true"></i> 注销
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="kit-slide">
    <ul class="kit-menu">
      <li class="kit-item">
        <div class="kit-title">
          <span>
            <i class="fa fa-cogs" aria-hidden="true"></i> level1</span>
        </div>
      </li>
      <li class="kit-item">
        <div class="kit-title">
          <span>
            <i class="fa fa-cogs" aria-hidden="true"></i> level1</span>
        </div>
        <ul class="kit-menu-sub">
          <li class="kit-item">
            <div class="kit-title">
              <span>
                <i class="fa fa-key" aria-hidden="true"></i> level2</span>
            </div>
          </li>
        </ul>
      </li>
      <li class="kit-item kit-open">
        <div class="kit-title">
          <span>
            <i class="fa fa-cogs" aria-hidden="true"></i> xxxxxxxxx</span>
        </div>
        <ul class="kit-menu-sub">
          <li class="kit-item kit-open">
            <div class="kit-title">
              <span>
                <i class="fa fa-key" aria-hidden="true"></i> level2</span>
            </div>
            <ul class="kit-menu-sub">
              <li class="kit-item">
                <div class="kit-title">
                  <span>
                    <i class="fa fa-key" aria-hidden="true"></i> level3</span>
                </div>
              </li>
              <li class="kit-item kit-active">
                <div class="kit-title">
                  <span>
                    <i class="fa fa-key" aria-hidden="true"></i> level3</span>
                </div>
              </li>
              <li class="kit-item">
                <div class="kit-title">
                  <span>
                    <i class="fa fa-key" aria-hidden="true"></i> level3</span>
                </div>
              </li>
            </ul>
          </li>
          <li class="kit-item kit-open">
            <div class="kit-title">
              <span>
                <i class="fa fa-key" aria-hidden="true"></i> level2</span>
            </div>
            <ul class="kit-menu-sub">
              <li class="kit-item">
                <div class="kit-title">
                  <span>
                    <i class="fa fa-key" aria-hidden="true"></i> level3</span>
                </div>
              </li>
            </ul>
          </li>
          <li class="kit-item">
            <div class="kit-title">
              <span>
                <i class="fa fa-key" aria-hidden="true"></i> level2</span>
            </div>
          </li>
          <li class="kit-item">
            <div class="kit-title">
              <span>
                <i class="fa fa-key" aria-hidden="true"></i> level2</span>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="kit-body">
    <div class="kit-panel">
      <div class="kit-panel-header">
        <div class="kit-panel-title">
          Table
        </div>
        <div class="kit-panel-tools">
          <span>
            <i class="fa fa-history" aria-hidden="true"></i>
          </span>
          <span>
            <i class="fa fa-caret-down" aria-hidden="true"></i>
          </span>
          <span style="position: relative;" data-toggle="kit-dropdown">
            <i class="fa fa-sliders" aria-hidden="true"></i>
            <ul class="kit-dropdown kit-dropdown-right">
              <li class="kit-item">
                <a href="javascript:;">Item1</a>
              </li>
              <li class="kit-item kit-active">
                <a href="javascript:;">Item1</a>
              </li>
              <li class="kit-item">
                <a href="javascript:;">Item1</a>
              </li>
              <li class="kit-divider">&nbsp;</li>
              <li class="kit-item">
                <a href="javascript:;">Item1</a>
              </li>
            </ul>
          </span>
        </div>
      </div>
      <div class="kit-panel-body" style="min-height:300px;">
        <table class="kit-table kit-table-bordered kit-table-striped" style="margin:0;">
          <caption>Caption</caption>
          <colgroup>
            <col width="80">
            <col>
            <col>
            <col width="150">
          </colgroup>
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Age</th>
              <th>Operation</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>张三</td>
              <td>19</td>
              <td>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-info">view</button>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-success">edit</button>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-danger">del</button>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>李四</td>
              <td>21</td>
              <td>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-info">view</button>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-success">edit</button>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-danger">del</button>
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>王五</td>
              <td>25</td>
              <td>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-info">view</button>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-success">edit</button>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-danger">del</button>
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>赵六</td>
              <td>28</td>
              <td>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-info">view</button>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-success">edit</button>
                <button type="button" class="kit-btn kit-btn-xs kit-btn-danger">del</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="kit-message kit-message-spin kit-anim kit-anim-fadein" data-times="99">
          <div class="kit-shade"></div>
          <div class="kit-spin">
            <span class="kit-spin-icon">
              <i class="fa fa-spinner" aria-hidden="true"></i>
            </span>
            <p class="kit-spin-text">加载中.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="kit-panel" style="margin-top:15px;">
      <div class="kit-panel-header">
        <div class="kit-panel-title">
          Panel
        </div>
        <div class="kit-panel-tools">
          <span>
            <input type="checkbox" class="kit-switch" data-action="showMsg" />
          </span>
          <span>
            <i class="fa fa-history" aria-hidden="true"></i>
          </span>
          <span>
            <i class="fa fa-caret-down" aria-hidden="true"></i>
          </span>
          <span style="position: relative;" data-toggle="kit-dropdown">
            <i class="fa fa-sliders" aria-hidden="true"></i>
            <ul class="kit-dropdown kit-dropdown-right">
              <li class="kit-item">
                <a href="javascript:;">Item1</a>
              </li>
              <li class="kit-item kit-active">
                <a href="javascript:;">Item1</a>
              </li>
              <li class="kit-item">
                <a href="javascript:;">Item1</a>
              </li>
              <li class="kit-divider">&nbsp;</li>
              <li class="kit-item">
                <a href="javascript:;">Item1</a>
              </li>
            </ul>
          </span>
        </div>
      </div>
      <div class="kit-panel-body" id="showMsg" style="min-height:300px; position:relative;">
        <div style="padding:10px;">
          <input type="checkbox" class="kit-switch" checked />
          <input type="checkbox" class="kit-switch" />
          <button type="button" class="kit-btn kit-btn-info kit-btn-sm" data-action="openModal">Open Modal</button>
        </div>
      </div>
    </div>
  </div>
  <div class="kit-bar-right">
    <div style="padding:10px;">
      <button type="button" class="kit-btn kit-btn-info kit-btn-sm">确定</button>
    </div>
  </div>
  <script src="./js/kitui.js?version=1.0.1"></script>
  <script>
    kitui.ready(function() {
      //   kitui.config({
      //     paths: {
      //       custom: "test/js/custom" //这是自定义模块
      //     }
      //   })
      kitui.require(['basic', 'switch', 'menu', 'jquery', 'message', 'modal'],
        function(basic, _switch, menu, $, message, modal /**,custom*/ ) {

          var k = new basic.default();
          k.render();

          var _s = new _switch.default();

          var index = undefined;
          var _msg = new message.default();
          _s.render({
            onSwitched: function(data) {
              var $elem = $(data.elem)
              var action = $elem.data('action');
              switch (action) {
                case 'showMsg':
                  if (data.elem.checked) {
                    index = _msg.spin({
                      elem: '#showMsg'
                    });
                  } else {
                    index && _msg.close(index);
                  }
                  break;
                default:
                  console.log('default');
                  _msg.closeAll();
                  break;
              }
            }
          });

          var _m = new menu.default();
          _m.render();

          //   // 这是自定义模块..
          //   var c = new custom();
          //   console.log(c.helloWorld());

          var _modal = new modal.default();
          console.log(_modal.defaults);
          $('*[data-action]').on('click', function() {
            var _that = $(this),
              action = _that.data('action');
            switch (action) {
              case 'openModal':
                _modal.dialog({
                  anim: 3,
                  content: 'xx',
                  shadeClose: false, // 关闭点击遮盖层关闭modal
                  onDestroyed: function() {
                    console.log('modal 销毁了.');
                  },
                  // 渲染成功的回调..
                  onSuccessed: function(elem, index) {
                    console.log("渲染成功.");
                  }
                });
                break;
              default:
                break;
            }
          });
        });
    });
  </script>
</body>

</html>